<template>
  <view class="list-item-bottom">
    <view class="order-price">
      <text>{{$t('cart.total')}}</text>
      <text class="integral-font-xs" v-if="orderitem.type != 'integral'">￥</text>
      <text class="integral-font-ls">{{
        (orderitem.pay_price || orderitem.cost) | priceBeforeZero
      }}</text>
      <text class="integral-font-xs">{{
        (orderitem.pay_price || orderitem.cost) | priceAfterZero
      }}</text>
      <text v-if="orderitem.type == 'integral'" class="unit-integral">{{$t('shop.integral')}}</text>
    </view>

    <!-- 底部按钮组 -->
    <view class="order-operate-section">
      <view
        class="cancle-btn button-xl"
        @click.stop="handleCancle(orderitem.order_id, operateBtnWord.greyStr)"
        v-if="operateBtnWord.greyStr"
        >{{ operateBtnWord.greyStr }}</view
      >
      <view
        class="confirm-btn button-xl"
        v-if="operateBtnWord.redStr"
        @click.stop="
          handleConfirm(
            orderitem.order_id || orderitem.id,
            operateBtnWord.redStr
          )
        "
        >{{ operateBtnWord.redStr }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  props: {
    orderitem: {
      type: Object,
      default: {},
    },
    user_id: {
      type: String,
      default: "",
    },
    orderType: {
      type: String,
      default: "",
    },
  },
  created() {
    let userInfo = uni.getStorageSync("userInfo");
    this.userInfo = userInfo;
  },
  computed: {
    operateBtnWord() {
      let redStr = "",
        greyStr = "";

      if (this.orderitem.is_pay == 1 && this.orderitem.type == "scan") {
        redStr = this.$t('order.del');
      }
      if (this.orderitem.type == "integral") {
        if (this.user_id) {
          redStr = this.$t('mdAdmin.clerkOrder');
        } else {
          redStr = this.orderitem.is_clerk == 0 ? this.$t('shop.toShop') : "";
        }
        if (this.orderitem.hasClerk || this.orderitem.is_clerk == 1) {
          redStr = ""; // 积分订单暂不支持删除订单
          greyStr = this.$t('user.clerked');
        }
      }

      return { redStr, greyStr };
    },
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  methods: {
    handleCancle(id, type) {
      this.$emit("handleCancle", { id, type });
    },
    handleConfirm(id, type) {
      this.$emit("handleConfirm", { id, type, item: this.orderitem });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item-bottom {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .order-price {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #262626;
    line-height: 44rpx;
    display: flex;
    align-items: baseline;

    text:nth-child(1) {
      font-size: 24rpx;
    }
    .integral-font-ls {
      font-size: 30rpx;
    }
    .integral-font-xs {
      font-size: 24rpx;
    }
    .unit-integral{
      font-size: 24rpx;
      margin-left: 5rpx;
    }
  }

  .order-operate-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .button-xl {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      width: 152rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 30rpx;
    }

    .cancle-btn {
      color: #262626;
      border: 2rpx solid #8c8c8c;
    }

    .confirm-btn {
      color: #f7271f;
      border: 2rpx solid #f7271f;
      margin-left: 24rpx;
    }
  }

  .list-item-bottom-list {
    display: flex;
    justify-content: flex-end;

    view {
      width: 152rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      margin-left: 22rpx;
      font-size: 26rpx;
      border-radius: 30rpx;
    }

    navigator {
      width: 152rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      margin-left: 22rpx;
      font-size: 26rpx;
      border-radius: 30rpx;
    }

    .item-bottom-list-one {
      border: 1rpx solid #8e8e8e;
      color: #262626;
    }

    .item-bottom-list-two {
      color: #f22a10;
      border: 1rpx solid #f22a10;
    }
  }
}
</style>
